<template>
  <div class="goods_search">
    <div class="top">
      <div class="search">
        <form action="/">
          <van-search
            class="searchbox"
            action-text="搜索"
            v-model="value"
            show-action
            placeholder="请输入搜索关键词"
            @blur="get(value)"
          />
        </form>
        <!-- @search="onSearch(value)" -->
      </div>

      <p class="text">热门搜索</p>
      <div class="hotbox">
        <div
          class="hot"
          v-for="item in keylist"
          :key="item.id"
          @clear="searchit(item.title)"
        >
          {{ item.title }}
        </div>
      </div>

      <van-divider />
    </div>
    <div v-if="datalist.length>0">
      <van-card
        style="color:red"
        v-for="item in datalist"
        :key="item.id"
        :price="item.price"
        :title="item.storeName"
        :thumb="item.image"
      />
    </div>
    <HotGoods v-else></HotGoods>
  </div>
</template>
<script>
import { Toast } from "vant";
import axios from "axios";
import HotGoods from "../../components/recommend";
export default {
  data() {
    return {
      value: "",
      keylist: [],
      datalist: [],
    };
  },
  components: {
    HotGoods,
  },
  created() {
    this.getKeyWord();
  },
  methods: {
    // 搜索 回车键
    //  async onSearch(val) {

    //     // Toast(val);

    //     const res=await this.$http.sousuo(val)
    //     console.log(res.data);
    //   },
    searchit(hah) {
      this.value = hah;
    },
    async getKeyWord() {
      // const res = await this.$http.getKeyWord();
      await axios
        .get(`https://api.java.crmeb.net/api/front/search/keyword`)
        .then((res) => {
          this.keylist = res.data.data;
        });
    },
    async get(val) {
      if (val == "") {
        return;
      }
      const res = await this.$http.sousuo(val);

      this.datalist = res.data.data.list;
      console.log(this.datalist);
    },
  },
};
</script>





<style lang="scss" >
.goods_search {
  .top {
    .search {
      padding: 10px 0 0 15px;

      .searchbox {
        width: 344px;
        background-color: #f7f7f7;
        border-radius: 16px;
        padding: 0 17px;
        box-sizing: border-box;
        height: 33px;
      }
    }
    .text {
      font-size: 14px;
      color: #999;
      margin: 25px 15px 12px 15px;
    }
    .hotbox {
      display: flex;
      .hot {
        // float: left;
        font-size: 13px;
        color: #454545;
        padding: 0 10px;
        height: 30px;
        border-radius: 15px;
        line-height: 30px;
        border: 0.5px solid #aaa;
        margin: 0 0 10px 10px;
      }
    }
  }
}
</style>